<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <script>
        // 处理表单提交
        function handleLogin(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            
            // 获取输入的用户名和密码
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const role = document.getElementById('role').value;
            
            // 显示加载状态
            document.getElementById('loginButton').disabled = true;
            document.getElementById('loginButton').textContent = '登录中...';
            showMessage('正在验证身份...', 'blue');
            
            // 根据角色进行不同的处理
            if (role === 'admin') {
                // 管理员登录验证
                if (username === 'root' && password === '123') {
                    showMessage('管理员登录成功！正在跳转...', 'green');
                    setTimeout(() => {
                        window.location.href = 'patient.html'; // 管理员页面
                    }, 1500);
                } else {
                    showMessage('管理员用户名或密码错误', 'red');
                    document.getElementById('loginButton').disabled = false;
                    document.getElementById('loginButton').textContent = '登录';
                }
            } else {
                // 普通用户登录流程
                const userData = {
                    "login": [
                        {
                            "key": 301,
                            "name": "username",
                            "type": 4,
                            "value": username
                        },
                        {
                            "key": 302,
                            "name": "password",
                            "type": 4,
                            "value": password
                        },
                        {
                            "key": 303,
                            "name": "authority",
                            "type": 3,
                            "value": 0
                        }
                    ]
                };
                const jsonData = JSON.stringify(userData);
                
                // 调用send函数发送数据到服务器
                send(jsonData);
            }
        }
        
        // 发送数据到服务器并处理响应
        function send(jsonData) {
            // 创建XMLHttpRequest对象（用于HTTP通信）
            const xhr = new XMLHttpRequest();
            var url = "";  
            
            // 配置请求（使用POST方法发送到登录API）
            xhr.open('POST', url, true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            // 设置响应处理函数
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) { // 请求完成
                    // 恢复按钮状态
                    document.getElementById('loginButton').disabled = false;
                    document.getElementById('loginButton').textContent = '登录';
                    
                    if (xhr.status === 200) { // 请求成功
                        try {
                            // 解析服务器返回的JSON数据
                            const response = JSON.parse(xhr.responseText);
                            
                            // 根据服务器响应进行处理
                            if (response.status === 'login ok') {
                                // 登录成功，显示成功消息并跳转到主页
                                showMessage('登录成功！正在跳转...', 'green');
                                setTimeout(() => {
                                    window.location.href = 'end1.html';
                                }, 1500);
                            } else if (response.status === 'login err') {
                                // 登录失败，显示错误消息
                                showMessage('登录失败，用户名或密码不正确', 'red');
                            } else {
                                // 未知响应
                                showMessage('未知错误，请重试', 'red');
                                console.error('未知响应格式:', response);
                            }
                        } catch (error) {
                            // 解析JSON失败
                            showMessage('服务器响应格式错误', 'red');
                            console.error('解析JSON失败:', error, '响应内容:', xhr.responseText);
                        }
                    } else {
                        // 请求失败，显示HTTP错误
                        showMessage(`请求失败: HTTP状态码 ${xhr.status}`, 'red');
                    }
                }
            };
            
            // 发送JSON数据并处理可能的错误
            try {
                xhr.send(jsonData);
            } catch (error) {
                // 恢复按钮状态
                document.getElementById('loginButton').disabled = false;
                document.getElementById('loginButton').textContent = '登录';
                
                // 显示网络错误
                showMessage('网络连接错误，请检查网络设置', 'red');
                console.error('发送请求时出错:', error);
            }
        }
        
        // 显示消息提示
        function showMessage(message, color) {
            const messageDiv = document.getElementById('message');
            messageDiv.textContent = message;
            messageDiv.style.color = color;
            messageDiv.style.display = 'block';
            
            // 3秒后隐藏消息
            setTimeout(() => {
                messageDiv.style.display = 'none';
            }, 3000);
        }
        
        // 切换密码可见性
        function togglePasswordVisibility() {
            const passwordInput = document.getElementById('password');
            const icon = document.getElementById('toggleIcon');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.textContent = '👁️';
            } else {
                passwordInput.type = 'password';
                icon.textContent = '👁️‍🗨️';
            }
        }
        
        // 验证用户名输入
        function validateUsername() {
            const usernameInput = document.getElementById('username');
            const validIcon = document.getElementById('usernameValid');
            
            if (usernameInput.value.length >= 3) {
                validIcon.style.display = 'inline';
            } else {
                validIcon.style.display = 'none';
            }
        }
        
        // 根据角色更新表单字段显示
        function updateFormFields() {
            const role = document.getElementById('role').value;
            const rememberMeDiv = document.querySelector('form > div:nth-child(6)');
            const registerDiv = document.querySelector('form > div:nth-child(8)');
            
            if (role === 'admin') {
                // 管理员登录隐藏不需要的选项
                rememberMeDiv.style.display = 'none';
                registerDiv.style.display = 'none';
            } else {
                // 普通用户显示所有选项
                rememberMeDiv.style.display = 'flex';
                registerDiv.style.display = 'block';
            }
        }
        
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 10) {
                navbar.style.padding = '8px 16px';
                navbar.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
            } else {
                navbar.style.padding = '16px';
                navbar.style.boxShadow = 'none';
            }
        });
    </script>
</head>
<body style="margin: 0; font-family: Arial, sans-serif; background-color: #f5f7fa;">
    <!-- 顶部导航栏 -->
    <header id="navbar" style="background-color: white; padding: 16px; transition: all 0.3s;">
        <div style="max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;">
            <div style="display: flex; align-items: center;">
                <i class="fa fa-shield" style="color: #165DFF; font-size: 24px; margin-right: 8px;"></i>
                <span style="font-weight: bold; font-size: 20px; color: #333;">安全登录</span>
            </div>
            <nav>
                <ul style="list-style-type: none; margin: 0; padding: 0; display: flex;">
                    <li style="margin-left: 24px;"><a href="#" style="color: #666; text-decoration: none;">首页</a></li>
                    <li style="margin-left: 24px;"><a href="#" style="color: #666; text-decoration: none;">帮助</a></li>
                    <li style="margin-left: 24px;"><a href="#" style="color: #666; text-decoration: none;">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main style="flex-grow: 1; display: flex; justify-content: center; align-items: center; padding: 24px;">
        <div style="width: 100%; max-width: 400px; background-color: white; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); overflow: hidden;">
            <div style="padding: 32px;">
                <div style="text-align: center; margin-bottom: 32px;">
                    <h2 style="font-size: 28px; font-weight: bold; color: #333; margin-bottom: 8px;">欢迎回来</h2>
                    <p style="color: #666;">请登录您的账户</p>
                </div>
                
                <form id="loginForm" onsubmit="handleLogin(event)" style="display: flex; flex-direction: column; gap: 16px;">
                    <!-- 消息提示区域 -->
                    <div id="message" style="color: blue; text-align: center; display: none;"></div>
                    
                    <!-- 角色选择器 - 直接显示下拉框 -->
                    <div style="margin-bottom: 8px;">
                        <select id="role" name="role" onchange="updateFormFields()" 
                            style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; outline: none;">
                            <option value="user">用户</option>
                            <option value="admin">管理员</option>
                        </select>
                    </div>
                    
                    <!-- 用户名输入框 -->
                    <div style="position: relative;">
                        <div style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #999;">
                            <i class="fa fa-user"></i>
                        </div>
                        <input 
                            type="text" 
                            id="username" 
                            name="username" 
                            placeholder="用户名" 
                            required
                            oninput="validateUsername()"
                            style="width: 100%; padding: 12px 12px 12px 36px; border: 1px solid #ddd; border-radius: 8px; outline: none; box-sizing: border-box;"
                        >
                        <div id="usernameValid" style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: green; display: none;">
                            <i class="fa fa-check-circle"></i>
                        </div>
                    </div>
                    
                    <!-- 密码输入框 -->
                    <div style="position: relative;">
                        <div style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #999;">
                            <i class="fa fa-lock"></i>
                        </div>
                        <input 
                            type="password" 
                            id="password" 
                            name="password" 
                            placeholder="密码" 
                            required
                            style="width: 100%; padding: 12px 36px 12px 36px; border: 1px solid #ddd; border-radius: 8px; outline: none; box-sizing: border-box;"
                        >
                        <button 
                            type="button" 
                            onclick="togglePasswordVisibility()" 
                            style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #999;"
                        >
                            <span id="toggleIcon">👁️‍🗨️</span>
                        </button>
                    </div>
                    
                    <!-- 记住我和忘记密码 -->
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <label style="display: flex; align-items: center; cursor: pointer;">
                            <input type="checkbox" style="margin-right: 8px;">
                            <span style="color: #666; font-size: 14px;">记住我</span>
                        </label>
                        <a href="#" style="color: #165DFF; font-size: 14px; text-decoration: none;">忘记密码?</a>
                    </div>
                    
                    <!-- 登录按钮 -->
                    <button 
                        type="submit" 
                        id="loginButton" 
                        style="padding: 12px; background-color: #165DFF; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; transition: all 0.3s;"
                    >
                        登录
                    </button>
                    
                    <!-- 注册选项 -->
                    <div style="margin-top: 24px; text-align: center;">
                        <p style="color: #666; font-size: 14px;">
                            还没有账户? <a href="register4.html" style="color: #165DFF; font-weight: bold; text-decoration: none;">立即注册</a>
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer style="background-color: #333; color: white; padding: 32px 0;">
        <div style="max-width: 1200px; margin: 0 auto; padding: 0 24px;">
            <div style="display: grid; grid-template-columns: 1fr; gap: 24px; text-align: center;">
                <div>
                    <h3 style="font-size: 18px; font-weight: bold; margin-bottom: 16px;">关于我们</h3>
                    <p style="color: #999; line-height: 1.6;">恶魔杨亚群</p>
                </div>
                <div>
                    <h3 style="font-size: 18px; font-weight: bold; margin-bottom: 16px;">联系我们</h3>
                    <ul style="list-style-type: none; padding: 0; margin: 0; color: #999; line-height: 1.6;">
                        <li><i class="fa fa-envelope" style="margin-right: 8px;"></i> wwww.ilove@u.com</li>
                        <li><i class="fa fa-phone" style="margin-right: 8px;"></i> +86 15610439272</li>
                        <li><i class="fa fa-map-marker" style="margin-right: 8px;"></i> 加利福尼亚州硅谷科技园</li>
                    </ul>
                </div>
                <div>
                    <h3 style="font-size: 18px; font-weight: bold; margin-bottom: 16px;">关注我们</h3>
                    <div style="display: flex; justify-content: center; gap: 16px;">
                        <a href="#" style="color: #999; transition: all 0.2s;">
                            <i class="fa fa-weibo" style="font-size: 20px;"></i>
                        </a>
                        <a href="#" style="color: #999; transition: all 0.2s;">
                            <i class="fa fa-wechat" style="font-size: 20px;"></i>
                        </a>
                        <a href="#" style="color: #999; transition: all 0.2s;">
                            <i class="fa fa-twitter" style="font-size: 20px;"></i>
                        </a>
                        <a href="#" style="color: #999; transition: all 0.2s;">
                            <i class="fa fa-linkedin" style="font-size: 20px;"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div style="border-top: 1px solid #444; margin-top: 24px; padding-top: 16px; text-align: center; color: #999; font-size: 14px;">
                <p>© 2025 智能病房消杀登录系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>
</body>
</html>